<script lang="ts" setup>
import {ref} from 'vue'
import router from '@/router'
import {ElMessage} from "element-plus";
import {logout} from "@/utils/api"
import {useUserStore} from '@/stores/user'
import {queryMessageByUidAPI} from '@/apis/message'
import { User, SwitchButton } from '@element-plus/icons-vue'
import { computedAsync } from '@vueuse/core'
const userStore=useUserStore()
const activeIndex = ref('/tianyanCommunity')

const role = ref('')
role.value = userStore.getToken()?userStore.getUserInfo().role:null
// console.log("role.value=" + role.value)

/**
 * 根据用户角色跳转不同的个人中心页面
 */
function personalCenter() {
  let routeName = ''
  switch (role.value) {
    case 'ADMIN':
      routeName = '/admin';
      break;
    case 'POLICE':
      routeName = '/policePage';
      break;
  }
  router.push({path: routeName})
}

/**
 * 退出登录
 */
const handleLogout = () => {
  ElMessageBox.confirm('确认要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(()=>{
    userStore.clearUserInfo()
  })
}

const unreadCount=computedAsync(async ()=>{
  return await queryMessageByUidAPI(useUserStore().getUserInfo().uid).then(res=>{
    return res.data.filter(msg => msg.isRead==='0').length
  })
})

const unreadClueCount=computedAsync(async ()=>{
  return await queryMessageByUidAPI(useUserStore().getUserInfo().uid).then(res=>{
    return res.data.filter(msg => msg.type==='clue'&&msg.isRead==='0').length
  })
})

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-container">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            router="true">
          <div class="menu-left">
            <el-menu-item index="/tianyanCommunity" class="brand-item">天眼社区</el-menu-item>
            <el-menu-item index="/tianyanUpload">天眼寻人</el-menu-item>
          </div>
          
          <div class="menu-right" v-if="!userStore.getToken()">

              <el-button text type="primary" @click="router.push('/login')" >登录</el-button>

            <el-divider direction="vertical" />

              <el-button type="primary" @click="router.push('/register')">注册</el-button>

          </div>
          
          <div class="menu-right user-info" v-else>

            <el-dropdown trigger="hover" style="margin-right: -10px">
              <span class="el-dropdown-link">
                <el-badge :value="unreadCount" :hidden="unreadCount===0">
               <el-icon size="18"><Bell /></el-icon>
                  </el-badge>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown">
                  <el-dropdown-item @click="router.push('/user/message?type=all')">
                    全部消息
                  </el-dropdown-item>
                  <el-dropdown-item @click="router.push('/user/message?type=unread')">
                    <el-badge :value="unreadCount" :hidden="unreadCount===0">
                      未读消息
                    </el-badge>
                  </el-dropdown-item>
                  <el-dropdown-item @click="router.push('/user/message?type=clue')">
                    <el-badge :value="unreadClueCount" :hidden="unreadClueCount===0">
                      线索消息
                    </el-badge>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-tag v-if="role==='ADMIN'" type="danger">管理员</el-tag>
            <el-tag v-if="role==='POLICE'" type="info">警察</el-tag>
            <el-avatar
                @click="personalCenter"
              :size="40"
              :src="userStore.getUserInfo().avatar?userStore.getUserInfo().avatar:'https://tse2-mm.cn.bing.net/th/id/OIP-C.v3ywLkq_yuiisLQpDZ9wagHaGk?w=245&h=217&c=7&r=0&o=5&dpr=1.3&pid=1.7'"
            />
            <el-dropdown trigger="hover" style="margin-left: -25px;margin-right: -40px">
              <span class="el-dropdown-link">
                {{userStore.getUserInfo().name}}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown">
                  <el-dropdown-item @click="router.push('/user/profile')">
                    <el-icon ><User /></el-icon>个人中心
                  </el-dropdown-item>

                  <el-dropdown-item v-if="role==='ADMIN'||role==='POLICE'" @click="personalCenter">
                    <el-icon><Setting /></el-icon>后台管理
                  </el-dropdown-item>

                  <el-dropdown-item @click="handleLogout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>

                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </el-menu>
      </el-header>
      
      <el-main class="main-container">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.header-container {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: white;
}

.main-container {
  margin-top: 60px;
  padding: 20px;
  background-color: #f5f7fa;
  //min-height: calc(100vh - 60px);
}



.el-menu-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.menu-left, .menu-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-item {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.menu-left .el-menu-item {
  transition: all 0.3s ease;
}

.menu-left .el-menu-item:hover {
  color: #409EFF;
  transform: translateY(-2px);
}

.menu-left .el-menu-item.is-active {
  position: relative;
  color: #409EFF;
  font-weight: 500;
}

.menu-left .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #409EFF;
  transition: all 0.3s ease;
}

.user-info {
  padding: 0 10px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
  color: #606266;
  font-size: 14px;
}

.el-dropdown-link:focus {
  outline: none;
}

.el-dropdown-link:hover {
  color: #409EFF;
}

.user-dropdown .el-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-avatar {
  margin-right: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.el-avatar:hover {
  cursor: pointer;
  transform: scale(1.05);
}

:deep(.el-menu) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  font-size: 15px;
}
</style>